<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
   <!-- content="text/html;charset=ISO-8859-15" -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	  <!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -->
    <title>DARTIES - Tableau de bord du directeur regionale</title>

	<link rel="stylesheet" href="../styles/style.css" type="text/css" media="screen" />
	
    <script type="text/javascript" src="../js/script.js"></script>
	<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script> 
	<!--<script type="text/javascript" src="../js/menu.js"></script> -->
	<script type="text/javascript" src="../js/tablesorter.js"></script> 
	
	<!-- Pour les graphiques en JQuery -->

	<script type="text/javascript" src="../js/highcharts.js" ></script>
	<script type="text/javascript" src="../js/adapters/mootools-adapter.js" ></script>
	<script type="text/javascript" src="../js/exporting.js"></script>
	
	<script type="text/javascript" src="../js/region.js"></script>

	
	
		<!-- Pour les graphiques en JQuery: Le Chiffre d'affaire  -->

	<script type="text/javascript">
	Highcharts.visualize = function(table, options) {
				// the categories
				options.xAxis.categories = [];
				$('tbody th', table).each( function(i) {
					options.xAxis.categories.push(this.innerHTML);
				});
				
				// the data series
				options.series = [];
				$('tr', table).each( function(i) {
					var tr = this;
					$('th, td', tr).each( function(j) {
						if (j > 0) { // skip first column
							if (i == 0) { // get the name and init the series
								options.series[j - 1] = { 
									name: this.innerHTML,
									data: []
								};
							} else { // add values
								options.series[j - 1].data.push(parseFloat(this.innerHTML));
							}
						}
					});
				});
				
				var chart = new Highcharts.Chart(options);
			}
				
			// On document ready, call visualize on the datatable.
			$(document).ready(function() {			
				var table = document.getElementById('datatable'),
				options = {
					   chart: {
					      renderTo: 'CA1',
					      defaultSeriesType: 'column',
						  backgroundColor: 'transparent'
					   },
					   title: {
					      text: 'Palmarès des magasins de la région Nord-Ouest',
						  align: 'center',
						  style: {
								color: '#3E576F',								
								font: 'bold 16px Arial'							
							}
					   },
					   subtitle: {
							text: 'Euros / <div  class="infosMois">Janvier </div>2011 / Chiffre d\'affaires',
							style: {
								color: '#3E576F',								
								font: 'bold 11px Arial'								
							}
						},
					   
					   legend: {		
							font: 'normal 13px Arial',
							backgroundColor: 'transparent'
						},
					
						credits: {
							enabled: false
						},
					   
					
					   xAxis: {
						  	 
						  labels: {
							
							rotation: -45,
							align: 'right',							
							style: {
								 font: 'normal 13px Arial'
							}
						}
					   },
					  
					   yAxis: {	
							max : 21000,
							labels: {
								formatter: function() {
									return this.value +'€';
								}
							},
							title: {
								text: 'CA (€)'
							}
					   },
					   tooltip: {
						
					      formatter: function() {
					         return '<b>'+ this.series.name +'</b><br/>'+this.x.toUpperCase()+'<br/>'+
					            this.y +'€';
					      }
					   },
					   plotOptions: {
						column: {
							pointPadding: 0.0,
							borderWidth: 0
						}
					}
					   
					};
				
			      					
				Highcharts.visualize(table, options);
			});
			function ajaxGraphMarge(mois){
			var chart;
			
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'MB1',
						defaultSeriesType: 'column',
						backgroundColor: 'transparent'
					},
					 title: {
					      text: 'Palmarès des magasins de la région Nord-Ouest',
						  align: 'center',
						  style: {
								color: '#3E576F',								
								font: 'bold 16px Arial'							
							}
					   },
					   subtitle: {
							text: 'Euros / <div  class="infosMois">'+mois+' </div>2011 / Marge brut',
							style: {
								color: '#3E576F',								
								font: 'bold 11px Arial'								
							}
						},
					xAxis: {
					 labels: {
							
							rotation: -45,
							align: 'right',							
							style: {
								 font: 'normal 13px Arial'
							}
						},
						categories: [
							'Alencon','Amiens','Angers','Angouleme','Bobigny','Cergy_Pontoise','Creteil','Evry','Lille','Melun','Nanterre','Nantes','Paris_Nord','Paris_Sud','Quimper','Rouen','St_Brieuc','Versailles'

						]
					},
					yAxis: {
						min: 0,
						title: {
							text: 'MB(€)'
						}
					},
					 legend: {		
							font: 'normal 13px Arial',
							backgroundColor: 'transparent'
						},
					
						credits: {
							enabled: false
						},
						
					tooltip: {
						formatter: function() {
							 return '<b>'+ this.series.name +'</b><br/>'+this.x.toUpperCase()+'<br/>'+
					            this.y +'€';
						}
					},
					plotOptions: {
						column: {
							pointPadding: 0.0,
							borderWidth: 0
						}
					},
				        series: [{
						name: 'Marge brut réel',
						data: [ 41.60, 50.70 ,  34.60 ,  35.50 ,  55.30 ,  59.00 ,  68.10 , 53.20 , 62.80 , 40.70 , 45.50 , 54.10 , 29.50 ,8.60 , 50.00 ,  51.50 ,  58.00 ,  67.70 
						]
				
					}, {
						name: 'Marge brut budget',
						data: [0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
				
					}]
				});
				
				
			
			}
			/********************************** Ventes **************************************/
			function ajaxGraphVente(mois){
			var chart;
			
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'VTS1',
						defaultSeriesType: 'column',
						backgroundColor: 'transparent'
					},
					 title: {
					      text: 'Palmarès des magasins de la région Nord-Ouest',
						  align: 'center',
						  style: {
								color: '#3E576F',								
								font: 'bold 16px Arial'							
							}
					   },
					   subtitle: {
							text: 'Euros / <div class="infosMois"> '+mois+'</div>2011 / Vente',
							style: {
								color: '#3E576F',								
								font: 'bold 11px Arial'								
							}
						},
					xAxis: {
					 labels: {
							
							rotation: -45,
							align: 'right',							
							style: {
								 font: 'normal 13px Arial'
							}
						},
						categories: [
							'Alencon','Amiens','Angers','Angouleme','Bobigny','Cergy_Pontoise','Creteil','Evry','Lille','Melun','Nanterre','Nantes','Paris_Nord','Paris_Sud','Quimper','Rouen','St_Brieuc','Versailles'

						]
					},
					yAxis: {
						min: 0,
						title: {
							text: 'VTS(€)'
						}
					},
					 legend: {		
							font: 'normal 13px Arial',
							backgroundColor: 'transparent'
						},
					
						credits: {
							enabled: false
						},
						
					tooltip: {
						formatter: function() {
							 return '<b>'+ this.series.name +'</b><br/>'+this.x.toUpperCase()+'<br/>'+
					            this.y +'€';
						}
					},
					plotOptions: {
						column: {
							pointPadding: 0.0,
							borderWidth: 0
						}
					},
				        series: [{
						name: 'Vente réel',
						data: [ 1563,1260,221,1296,895,761,1228,1258,1307,1232,859,1535,1029,1492,175,758,1161,2345]
				
					}, {
						name: 'Vente budget',
						data: [0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
				
					}]
				});
				
				
			}
	</script>
	<script type="text/javascript">
		 function calendrier(){
			
			
			g_globalObject = new JsDatePick({
				useMode:1,
				isStripped:true,
				target:"calendrier"
			});		
			
			g_globalObject.setOnSelectedDelegate(function(){
			});
		}
	</script>
</head>
<body onload="calendrier(); ajaxGraphMarge(document.getElementById('SelectMois').value); ajaxGraphVente(document.getElementById('SelectMois').value);"" > 
	<div id="page" style="height:2170px;">
		<div id="header">
		
		<!--  -->
			<div id="utilisateur">Morvan Jeremy<a href="../index.html" >D&eacute;connexion</a></div>
			
			
			

			
			<div class="cleared"></div>
			<div id="logo-darties">&nbsp </div>
			<div id="site-titre">
				<p class = "titre"><a href="#">Tableau de bord </a></p>
				<p class= "detail">Direction regionale</p>
			</div>
			<div id="logo-iut">&nbsp </div>
			<div id="date_modification">Dernière modification 7 janvier 2012</div>
		
</div> <!-- Fin Div Header -->
		<!-- Onglets -->
		
		
		
		
		<ul id="tabs">
			<li >
				<a href="index.php"  class="active">Palmarès magasin</a>
			</li>
			<li>
				<a href="region.php" >Palmarès r&eacute;gion</a>
			</li>		
			<li>
				<a href="historique.html">Historique</a>
			</li>			
			<li>
				<a href="aide.html" >Aide</a>
			</li>
			<li class="options"><img src="../images/header/pdf.png" title="Convertir en PDF"></li>
			<li class="options"><img src="../images/header/imp.png" title="Imprimer"></li>
		</ul>
	
	

			
<!-- MIDDLE -->
		<div id= "middle">
<!-- SIDEBAR -->
			<div id="sidebar">
			
				<!-- BLOCK INDICATEURS -->
				<div class="block">
					<div class="titre">Filtres</div>
					<div class="contenu">
						<table>
							
						<tr>
								<td><span> Region:</span></td>
								<td>
									<select style="width:150px" disabled>
										<option >Nord-Ouest</option>
										<option >Sud-Ouest</option>
										<option >Nord-Est</option>
										<option >Sud-Est</option>
										<option >Region parisienne</option>
									</select>
								</td>
							</tr>
							<tr>
								<td><span> Periode:</span></td>
								<td>
									<select style="width:150px" onchange="changePeriode(this.value);" >
										<option value="Mois" >Mois</option>
										<option value="Annuel">Annuel</option>										
										<option value="Semestrielle">Semestrielle</option>
									</select>
								</td>
							</tr>						
								
							<tr>
								<td><span> Mois:</span></td>
								<td>
									<select style="width:150px" onchange="changeMois(this.value);" id="SelectMois">
											<option>Janvier</option>
											<option>Fevrier</option>
											<option>Mars</option>
											<option>Avril</option>
											<option>Mai</option>
											<option>Juin</option>
											<option>Juillet</option>
											<option>Aout</option>
											<option>Septembre</option>
											<option>Octobre</option>
											<option>Novembre</option>
											<option>D&eacute;cembre</option>
									</select>
								</td>
							</tr>						
								
							<tr>
								<td><span> Indicateur:</span></td>
								<td>
									<select style="width:150px" onchange="changeIndicateur(this.value);">
										<option selected>Touts indicateurs</option>
										<option >CA</option>
										<option >Marge</option>
										<option >Ventes</option>
									</select>
								</td>
							</tr>	
							
							<tr>
								<td><span> Produits:</span></td>
								<td>
									<select style="width:150px" disabled>
										<option >Toutes familles</option>
										<option >Four</option>
										<option >Hifi</option>
										<option >Magneto</option>
									</select>
								</td>
							</tr>
							<tr>
								<td><span> Devise:</span></td>
								<td>
									
										<input type="radio" checked name="devise">€
										<input type="radio"  name="devise">$
									
								</td>
							</tr>								
						</table>
					</div>
				</div><!-- Fin Div Indicateurs -->					
				<div class="cleared"></div>
			
			
			
		<!-- BLOCK RECHERCHE -->
				<div class="block">
					<div class="titre"> Recherche </div>
					<div class="contenu">
						<form method="get" id="newsletterform" name="newsletterform" action="http://www.google.fr/#sclient=psy-ab&hl=fr&q=" target="_blank">
							<input type="text" value="Recherche" name="email" id="s" style="width: 60%;" onclick="this.value=''"/>						
							<a href="#" onclick="newsletterform.submit();"><img src="../images/contenu/recherche.jpg"  height='15px'></img></a>
							<br></br>
						</form>
					</div>
				</div> <!-- Fin Div Recherche -->
				
		
		
				<!-- BLOCK CALENDRIER -->
				<div class="block">
					<div class="titre">Calendrier</div>
					<div class="contenu">
						<div id="calendrier" style="margin:none; width:200px; height:250px;"></div>   
					</div>
				</div> <!-- Fin Div Calendrier -->
				<div class="cleared"></div>
				
			</div><!-- Fin Div Sidebar --> 

<!-- CONTENT  -->
			<div id="content" style="background: url(../images/france/zone_ouest.gif)  center  no-repeat; background-size: 100%; ">

						<div class="cleared"></div>

						<?php
						include("html/all.html");
						include("html/CA.html");
						include("html/MB.html");
						include("html/VTS.html");
						?>
							<div class="block2">
								<div id="CA1" ></div>
								<div id="MB1" ></div>
								<div id="VTS1"></div>
							</div> <!-- Fin Div left -->
							
							
							

							<div class="cleared"></div>
								
						
				
			
			
		
			
			

		
			</div><!-- Fin Div content --> 
			<div class="cleared"></div>
			
		</div> <!-- Fin div middle -->
			
		<div id="footer"  style="top:1380px;">
			<p>Entreprise DARTIES - 2011</p>                         		
		</div>
		<div class="cleared"></div>
	</div> <!-- Fin div page -->
</body>
</html>
